import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    FlatList,
    Text,
    Button,
    ToastAndroid,
} from 'react-native';
import * as Color from "../constant/Color";

const ITEM_HEIGHT = 50;

export default class PageMine extends Component {

    _mFlatList:[];

    constructor(props){
        super(props);
        this.state = {
            /** 是否正在刷新 */
            mIsRefresh  : false,
            /** 数据源 */
            mDatas      : this._getDatas(0),
        }
    }

    /**
     * 将列表元素和数据结合在一起，生成列表。
     * @param item 是data属性中的每个列表的数据（ Array<object> 中的 object) 。
     */
    _renderItem(item){
        let txt = '第' + item.index + '个' + ' title=' + item.item.title;
        let bgColor = item.index % 2 === 0 ? Color.white : Color.lightGray;
        return <Text style={[{flex: 1, height: ITEM_HEIGHT, backgroundColor: bgColor}, styles.txt]}>{txt}</Text>
    };

    /** 分割线 */
    _separator(){
        return <View style={{height:1,backgroundColor:Color.darkGray}}/>;
    };

    render() {
        return (
            <View style={{flex:1}}>
                <FlatList
                    ref={(flatList)=>this._mFlatList = flatList}

                    data={this.state.mDatas}
                    renderItem={this._renderItem}
                    ItemSeparatorComponent={this._separator}
                    keyExtractor={(item,index)=>("index"+index+item)}

                    //numColumns ={3}
                    //columnWrapperStyle={{borderWidth:2,borderColor:'black',paddingLeft:20}}

                    //horizontal={true}

                    refreshing={this.state.mIsRefresh}
                    onRefresh={this._onRefresh}

                    onEndReachedThreshold={0.1}
                    onEndReached={this._onReachEnd}
                    // onEndReached={(info)=>{
                    //     this._onReachEnd(info);
                    // }}

                    //onViewableItemsChanged={(info)=>{
                    //console.warn(info);
                    //}}
                />
            </View>
        );
    }

    /**
     * 和 ListView 不同，它没有特殊的 DataSource 数据类型作为传入参数。
     * 它接收的仅仅只是一个 Array<object> 作为参数。
     * 参数数组中的每一项，需要包含 key 值作为唯一标示。数据结构如下：
     * [{title: 'Title Text', key: 'item1'}]
     */
    _getDatas(index){
        let data = [];
        for (let i = index; i < index + 20; i++) {
            data.push({key: i, title: i + ''});
        }
        return data;
    }

    /** 下拉时促发 */
    _onRefresh = () => {
        if(this.state.mIsRefresh) return;
        ToastAndroid.show('正在刷新中.... ', ToastAndroid.SHORT);
        this.setState({
            mIsRefresh : true,
        });

        let timer = setTimeout(() => {
            this.setState({
                mIsRefresh : false,
            });
            clearTimeout(timer);
        }, 1000)
    };

    /** 拉到底部时促发 */
    _onReachEnd = () => { };
}

const styles = StyleSheet.create({
    txt: {
        textAlign: 'center',
        textAlignVertical: 'center',
        color: Color.darkGray,
        fontSize: 20,
    }
});
